<template>
	<div class="container">
		<div id="popup-box" class="ol-popup">
			<a href="#" id="popup-closer" class="ol-popup-closer">×</a>
			<div id="popup-content"></div>
		</div>
	</div>
</template>

<script lang="ts">
import 'ol/ol.css'
import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature'
import {Point} from "ol/geom"
import {Component, Vue} from 'vue-property-decorator'
    import {createLayer,createSource,createStyle,pointImageStyle} from '@/utils/map'
@Component
export default class PlaceCard extends Vue {
    overlayer!: Overlay;
    locationlayer!: any;
    targetmap!: any;
    currentFeature: Feature | null = null;  // 当前选中的要素

    cityPoint(data: any) {
        if (!this.locationlayer) {
            console.error('没有创建位置图层');
            return;
        }
        const vsource = this.locationlayer.getSource();
        vsource.clear();
        let features: Feature[] = [];
        data.forEach((item: any) => {
            let feature = new Feature({
                geometry: new Point([item.location.lng, item.location.lat]),
                citydata: item,
            });
            feature.setStyle(pointImageStyle('location'));
            features.push(feature);
        });
        vsource.addFeatures(features);
    }

    // 初始化点击交互
    initClickInteraction(map: any) {
        this.createLayer(map);
        this.targetmap = map;
        
        // 创建 Overlay
        const container = document.getElementById('popup-box')!;
        const closer = document.getElementById('popup-closer')!;
        
        this.overlayer = new Overlay({
            element: container,
            autoPan: {
                animation: {
                    duration: 250,
                },
            }
        });

        // 关闭按钮点击事件
        closer.onclick = (evt) => {
            this.overlayer.setPosition(undefined);
            this.currentFeature = null;
            evt.preventDefault();
        };

        map.addOverlay(this.overlayer);

        // 地图点击事件
        map.on('click', (evt: any) => {
       
            const feature = map.forEachFeatureAtPixel(evt.pixel, (feature: Feature) => feature);
            
            if (feature && feature !== this.currentFeature) {
                // 点击新要素显示信息
                this.showPopup(feature, evt.coordinate);
                this.currentFeature = feature;
            } else if (!feature) {
                // 点击空白区域关闭
                this.overlayer.setPosition(undefined);
                this.currentFeature = null;
            }
        });
    }

    // 显示弹窗内容
    private showPopup(feature: Feature, coordinate: number[]) {
        const content = document.getElementById('popup-content')!;
        const cityInfo = feature.get('citydata');
        
        if (cityInfo?.name) {
            content.innerHTML = `
                <h3>${cityInfo.name}</h3>
                <div>
                    <p>${cityInfo.address || '暂无地址'}</p>
                    <p>${cityInfo.telephone || '暂无电话'}</p>
                </div>
            `;
            this.overlayer.setPosition(coordinate);
        }
    }

    createLayer(map: any) {
        if (!this.locationlayer) {
            this.locationlayer = createLayer(createSource(),createStyle("orange","darkgreen","red"));
            map.addLayer(this.locationlayer);
        }
    }

}
</script>

<style scoped>
/* 新增关闭按钮样式 */
.ol-popup-closer {
    position: absolute;
    top: 5px;
    right: 10px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    z-index: 1000;
    line-height: 1; /* 防止符号垂直偏移 */
}

.ol-popup-closer:hover {
    color: #ff4444;
}

/* 调整弹窗定位 */
.ol-popup {
    padding: 30px 15px 15px; /* 顶部留更多空间 */
    position: absolute;
    background-color: rgba(28, 181, 51, 0.9);
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    min-width: 220px;
    max-width: 300px;
}

/* 调整箭头样式 */
.ol-popup:after, .ol-popup:before {
    border-top-color: rgba(255, 255, 255, 0.9);
}
</style>